@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            对账单明细管理
            <small>对账单明细列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
            <li><a href="/JxAccountHead">财务管理</a></li>
            <li class="active">账单明细</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">对账单明细</h3>
                        <div class="box-tools">
                            <button type="button" class="btn btn-primary" onclick="AddItem()">
                                <i class="fa fa-plus"></i> 添加明细
                            </button>
                            <button type="button" class="btn btn-info" onclick="ImportFromBill()">
                                <i class="fa fa-download"></i> 从业务单导入
                            </button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div id="account-list-table" class="avue-crud" ref="crud">
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>

<script>
    // 获取URL参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    var headId = getUrlParam('headId');
    
    var vm = new Vue({
        el: '#account-list-table',
        data: function () {
            return {
                options: {
                    url: '/JxAccountList/GetByHeadId?headId=' + headId,
                    deleteBtn: true,
                    editBtn: true,
                    addBtn: false,
                    viewBtn: true,
                    searchShow: false,
                    columnBtn: true,
                    excelBtn: true,
                    printBtn: true,
                    align: 'center',
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    labelWidth: 120,
                    column: [
                        {
                            label: '表头ID',
                            prop: 'HeadId',
                            type: 'input',
                            value: headId,
                            editDisplay: false,
                            addDisplay: false,
                            viewDisplay: true
                        },
                        {
                            label: '业务单号',
                            prop: 'BillNo',
                            type: 'input',
                            rules: [
                                { required: true, message: '请输入业务单号', trigger: 'blur' }
                            ]
                        },
                        {
                            label: '商品编码',
                            prop: 'GoodsCode',
                            type: 'input',
                            rules: [
                                { required: true, message: '请输入商品编码', trigger: 'blur' }
                            ]
                        },
                        {
                            label: '商品名称',
                            prop: 'GoodsName',
                            type: 'input',
                            rules: [
                                { required: true, message: '请输入商品名称', trigger: 'blur' }
                            ]
                        },
                        {
                            label: '规格型号',
                            prop: 'SpecModel',
                            type: 'input'
                        },
                        {
                            label: '单位',
                            prop: 'Unit',
                            type: 'input',
                            rules: [
                                { required: true, message: '请输入单位', trigger: 'blur' }
                            ]
                        },
                        {
                            label: '数量',
                            prop: 'Quantity',
                            type: 'number',
                            min: 0,
                            step: 0.01,
                            rules: [
                                { required: true, message: '请输入数量', trigger: 'blur' },
                                { type: 'number', min: 0.01, message: '数量必须大于0', trigger: 'blur' }
                            ]
                        },
                        {
                            label: '单价',
                            prop: 'Price',
                            type: 'number',
                            min: 0,
                            precision: 2,
                            rules: [
                                { required: true, message: '请输入单价', trigger: 'blur' },
                                { type: 'number', min: 0.01, message: '单价必须大于0', trigger: 'blur' }
                            ]
                        },
                        {
                            label: '金额',
                            prop: 'Amount',
                            type: 'number',
                            min: 0,
                            precision: 2,
                            editDisplay: false,
                            addDisplay: false,
                            viewDisplay: true
                        },
                        {
                            label: '备注',
                            prop: 'Remark',
                            type: 'textarea'
                        }
                    ],
                    beforeOpen: function (done, type) {
                        // 清空表单验证状态
                        this.$refs.crud.resetForm();
                        // 设置默认HeadId
                        if (type === 'add') {
                            this.$refs.crud.formData.HeadId = headId;
                        }
                        done();
                    },
                    beforeAdd: function (row, done, loading) {
                        // 计算金额
                        row.Amount = (row.Quantity * row.Price).toFixed(2);
                        done();
                    },
                    beforeEdit: function (row, index, done) {
                        // 编辑前操作
                        done();
                    },
                    beforeUpdate: function (row, done, loading) {
                        // 计算金额
                        row.Amount = (row.Quantity * row.Price).toFixed(2);
                        done();
                    },
                    success: function (res, type) {
                        if (type === 'add' || type === 'edit' || type === 'del') {
                            this.$message.success(res.Message);
                            this.$refs.crud.refresh();
                            // 更新表头总金额
                            this.updateHeadTotal();
                        }
                    },
                    updateBtn: {
                        url: '/JxAccountList/Update',
                        method: 'post'
                    },
                    delBtn: {
                        url: '/JxAccountList/Delete',
                        method: 'delete'
                    },
                    addBtn: {
                        url: '/JxAccountList/Add',
                        method: 'post'
                    },
                    updateHeadTotal: function () {
                        // 更新表头总金额
                        axios.post('/JxAccountHead/UpdateTotalAmount', { id: headId }).then(function (res) {
                            if (res.data.Code !== 200) {
                                _this.$message.error(res.data.Message);
                            }
                        });
                    }
                }
            }
        },
        methods: {
            AddItem: function () {
                this.$refs.crud.handleAdd();
            },
            ImportFromBill: function () {
                // 从业务单导入明细
                this.$prompt('请输入业务单号（多个单号用逗号分隔）', '从业务单导入', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[\d,]+$/,
                    inputErrorMessage: '业务单号格式不正确'
                }).then(function (data) {
                    axios.post('/JxAccountList/ImportFromBill', {
                        headId: headId,
                        billNos: data.value
                    }).then(function (res) {
                        if (res.data.Code === 200) {
                            vm.$message.success(res.data.Message);
                            vm.$refs.crud.refresh();
                            // 更新表头总金额
                            vm.options.updateHeadTotal();
                        } else {
                            vm.$message.error(res.data.Message);
                        }
                    });
                }).catch(function () {
                    vm.$message.info('已取消导入');
                });
            }
        },
        mounted: function () {
            // 组件挂载后执行
            // 验证headId是否存在
            if (!headId) {
                this.$message.error('缺少必要参数：headId');
                window.history.back();
            }
        }
    });
</script>